import React, { useEffect, useState } from 'react';
import { Table, Input, Switch, Button, Form } from 'antd';
/*
 * 1.未点击switch按钮展示服务器传来的数据
 * 2.点击switch按钮
 *    + 那一行显示input，并可以输入内容，点保存按钮可以获取对应的数据
 *    + 用户点了点开按钮input输入了内容，但是又关了后，则显示原数据，再次打开也显示原数据
 */
export default Form.create()(() => {
  const columns = [
    {
      title: '接口名称',
      dataIndex: 'apiName',
      key: 'name',
      render: (text) => <a>{text || '暂未配置'}</a>,
    },
    {
      title: '是否对接',
      key: 'action',
      render: (text, record) => {
        return (
          <Switch
            onChange={(checked) => onChangeSwitch(checked, record, text)}
          />
        );
      },
    },
    {
      title: '接口地址(测试环境)',
      dataIndex: 'testUrl',
      key: 'testUrl',
      render: (text, record) => {
        let testUrlVal = tableData.find(
          (item) => item.key == record.key
        )?.testUrl1;
        return record.access ? (
          <Input
            value={testUrlVal ? testUrlVal : text}
            onChange={(e) => testUrlChange(e, text, record)}
          />
        ) : (
          <span>{text}</span>
        );
      },
    },
    {
      title: '接口地址 (生产环境)',
      dataIndex: 'prdUrl',
      key: 'prdUrl',
      render: (text, record) => {
        let prdUrlVal = tableData.find(
          (item) => item.key == record.key
        )?.prdUrl1;
        console.log(prdUrlVal,record);
        return record.access ? (
          <Input
            value={prdUrlVal ? prdUrlVal : text} // Todo:内容删除不掉
            onChange={(e) => proUrlChange(e, text, record)}
          />
        ) : (
          <span>{text}</span>
        );
      },
    },
  ];
  const [tableData, setTableData] = useState([
    {
      key: '1',
      apiName: '订单信息同步',
      testUrl: 32,
      prdUrl: 'New York No. 1 Lake Park',
    },
    {
      key: '2',
      apiName: '司机实时位置推送',
      testUrl: 42,
      prdUrl: 'London No. 1 Lake Park',
    },
    {
      key: '3',
      apiName: '支付状态同步',
      testUrl: 32,
      prdUrl: 'arwaad. 1 Lake Park',
    },
  ]);

  let onChangeSwitch = (checked, record, text) => {
    let currentData = [];
    tableData.forEach((f) => {
      if (f.key === record.key) {
        // console.log(f,record);
        currentData.push({ ...f, access: checked,testUrl1: f.testUrl,
        prdUrl1:f.prdUrl, });
      } else {
        currentData.push(f);
      }
    });
    console.log('currentData', currentData);
    setTableData(currentData);
    if (!checked) {
      let val = tableData.map((f) => {
        if (f.key === record.key) {
          return {
            ...(tableData.length > 0 &&
              tableData.find((item) => item.key == f.key)),
            key: f.key,
            testUrl1: '',
            prdUrl1: '',
            access: checked,
          };
        } else {
          return {
            ...(tableData.length > 0 &&
              tableData.find((item) => item.key == f.key)),
          };
        }
      });

      console.log('关', val);
      setTableData(val);
    }
  };

  let testUrlChange = (e, text, record) => {
    let testUrlData = [];
    tableData.forEach((f) => {
      if (f.key === record.key) {
        testUrlData.push({ ...f, testUrl1: e.target.value });
      } else {
        testUrlData.push(f);
      }
    });
    // console.log(testUrlData);
    setTableData(testUrlData);
  };
  let proUrlChange = (e, text, record) => {
    let proUrlData = [];
    tableData.forEach((f) => {
      if (f.key === record.key) {
        proUrlData.push({ ...f, prdUrl1: e.target.value });
      } else {
        proUrlData.push(f);
      }
    });
    setTableData(proUrlData);
  };
  // console.log(tableData);

  let save = () => {
    let abc = tableData.map((item) => {
      if (item.key && item.prdUrl && item.testUrl) {
        return {
          key: item.key,
          prdUrl: item.prdUrl1 || '',
          testUrl: item.testUrl1 || '',
        };
      }
    });
    console.log('tableData', tableData);
    console.log(abc);
  };
  useEffect(() => {}, []);
  return (
    <div>
      <h2>Table1</h2>
      <Table columns={columns} dataSource={tableData} />
      <Button type="danger" onClick={save}>
        保存
      </Button>
    </div>
  );
});
